tint#

The tint property overrides the default accent color for a specific view using a given style. Unlike the global app accent color (which may be modified by user settings), tint is always respected and should be used to convey semantic meaning or visual emphasis at the component level.

Definition#

1tint?: ShapeStyle | DynamicShapeStyle

Supported Values#

• ShapeStyle: A solid color, gradient, or material.
• DynamicShapeStyle: A color or gradient that adapts to light/dark mode.

Common Use Cases#

• Apply a local accent color to controls like Toggle, Slider, Button, or ProgressView.
• Visually differentiate elements in lists, forms, or modal components.
• Ensure consistent behavior regardless of system or user theme overrides.

Example: Basic Tint#

1<Toggle 
2  tint="systemGreen"
3  // ...
4/>

Example: Gradient Tint#

1<ProgressView
2  value={0.6}
3  tint={{
4    gradient: [
5      { color: "red", location: 0 },
6      { color: "orange", location: 1 }
7    ],
8    startPoint: { x: 0, y: 0 },
9    endPoint: { x: 1, y: 1 }
10  }}
11/>

Example: Dynamic Tint#

1<Slider
2  tint={{
3    light: "blue",
4    dark: "purple"
5  }}
6  // ...
7/>